<template>
  <div class="home-container">
    <van-nav-bar class="page-nav-bar">
      <template #title>
        <div class="title-container">
          <van-button
            type="info"
            size="small"
            round
            class="search-btn"
            icon="search"
            @click="$router.push({ name: 'search' })"
            >搜索</van-button
          >
          <div class="hanbao" @click="isChannelEditShow = true">
            <i class="toutiao toutiao-gengduo"></i>
          </div>
        </div>
      </template>
    </van-nav-bar>
    <van-tabs v-model="active">
      <van-tab v-for="(v, i) of channels" :key="v.id" :title="v.name">
        <div
          ref="refArticleListContainer"
          class="article-list-container"
          :class="{ active: active === i }"
          @scroll="onScroll"
        >
          <!-- <div v-for="v of  channels" :key="v.id">{{ v.name }}</div> -->
          <ArticleList :channel="v" />
        </div>
      </van-tab>
    </van-tabs>
    <van-popup
      :value="isChannelEditShow"
      position="left"
      :style="{ width: '100%', height: '100%' }"
      closeable
      close-icon="close"
      @click-close-icon="onClose"
    >
      <ChannelEdit
        ref="refChannelEdit"
        :activeChannel="channels[active]"
        @switchChannel="onSwitchChannel"
        @updateMyChannels="channels = [...$event]"
      />
    </van-popup>
  </div>
</template>

<script>
import { throttle } from 'lodash'
import ArticleList from '@/components/article-list'
import ChannelEdit from './components/channel-edit'
import { getItem, KEY_MY_CHANNELS, setItem } from '../../utils/storage.js'
export default {
  name: 'HomePage',
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      activatedCount: 0,
      isChannelEditShow: false, // 是否显示频道编辑弹层
      channels: [], // 所有频道
      active: 0 // 当前激活的频道的索引
    }
  },
  methods: {
    onScroll: throttle((e) => {
      console.log('当前滚动位置：', e.target.scrollTop)
      // 往每个容器的 dataset 上存
      e.target.dataset.scrollTop = e.target.scrollTop
    }, 300),
    onClose () {
      // 如果关闭的时候，是编辑状态
      if (this.$refs.refChannelEdit.isEditStatus) {
        // 如果我的频道有改动
        if (this.$refs.refChannelEdit.isChanged) {
          this.$dialog
            .confirm({
              title: '你还没有保存，确定要关闭吗？',
              message: '如果点击确定，则会重置我的频道列表！'
            })
            .then(() => {
              // 点击确定按钮后执行该回调
              this.$refs.refChannelEdit.resetMyChannles()
              this.isChannelEditShow = false
            })
        } else {
          // 我的频道没改动
          this.$refs.refChannelEdit.isEditStatus = false
          this.isChannelEditShow = false
        }
      } else {
        // 不是编辑状态
        this.isChannelEditShow = false
      }

      // 重新获取我的频道
      // this.getChannels()
    },
    onSwitchChannel (channel) {
      // 先要从 this.channels 中找出 channel 的索引
      this.active = this.channels.findIndex((v) => v.id === channel.id)
      this.isChannelEditShow = false // 关闭弹层
    },
    getChannels () {
      // 如果登录了，调接口
      if (this.$store.state.userToken) {
        this.apis.channel.getUserChannels().then((myChannels) => {
          this.channels = myChannels
        })
      }
      // 如果没登录，先看本地有没有，
      else {
        // 这里不能直接给 this.channels 赋值，因为如果为 null 时，要去发请求，而请求是异步的（可以想象成5秒后才响应成功，这5秒期间 this.channels 就是 null，又因为，页面的渲染不会等待请求完成再去渲染，所以不能直接赋值）
        const channels = getItem(KEY_MY_CHANNELS) // 有一个微任务去更新视图
        //  如果有就用，
        if (channels) {
          this.channels = channels
        }
        //  如果没有再调接口获取默认的，并将其存储到本地
        else {
          this.apis.channel.getUserChannels().then((myChannels) => { // 发请求也是一个微任务
            this.channels = myChannels // 有一个微任务去更新视图
            setItem(KEY_MY_CHANNELS, myChannels)
          })
        }
      }

      // 下面的逻辑有漏洞，当第一加载页面时，本地没有，是 null，也直接用了
      // // 如果登录了，调接口
      // if (this.$store.state.userToken) {
      //   // 这是拿用户的我的频道
      //   this.apis.channel.getUserChannels().then((myChannels) => {
      //     this.channels = myChannels
      //   })
      // } else {
      //   // 没登录，拿本地存储
      //   // 数据更新是同步的，但是，驱动视图更新是异步的
      //   this.channels = getItem(KEY_MY_CHANNELS)
      // }
    }
  },
  created () {
    // 这是拿所有频道
    // this.apis.channel.getChannels().then((res) => {
    //   this.channels = res.data.data.channels
    // })

    // 这是拿用户的我的频道
    this.getChannels()
    console.log('created')
  },
  mounted () {
    console.log('mounted')
  },
  activated () {
    console.log('activated')
    this.$nextTick(() => {
      console.log(
        'nextTick-list:',
        document.querySelectorAll('.article-list-container')
      )
    })

    this.activatedCount++ // 每次激活，次数加 1
    // activated 这个钩子在初始化时也会执行一次，所以要判断一下
    if (this.activatedCount === 1) {
    } else {
      // 如何拿到当前的容器  this.active 可以获取当前的激活的频道索引
      // document.querySelectorAll 可以获取到所有的滚动容器
      // 注意：不能用 ref ，因为 ref 有顺序问题，先点的频道，会先进入 refs 数组
      // const list = document.querySelectorAll('.article-list-container')
      // console.log('HomePage 激活了，当前滚动容器列表：', list)
      // console.log(
      //   '顺序问题-refArticleListContainer:',
      //   this.$refs.refArticleListContainer
      // )
      // const container = list[this.active] // 这个还是会有顺序问题，因为可以跳着点频道
      // 找到当前激活的容积 div
      const container = document.querySelector('.article-list-container.active')
      container.scrollTop = container.dataset.scrollTop // 拿到在 scroll 事件中存储的滚动位置
    }
  }
}
</script>

<style scoped lang="less">
.home-container {
  padding-bottom: 100px;

  .article-list-container {
    /* calc =MDN=> https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc  */
    height: calc(100vh - 180px - 100px);
    overflow-y: auto;
  }

  /deep/ .van-popup__close-icon {
    top: 24px;
  }
  .title-container {
    padding: 0 20px 0 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .hanbao {
    i {
      font-size: 52px;
    }
  }
  .search-btn {
    width: 555px;
  }
  // 如果元素不在当前组件的模板（template）中，那么就需要加样式穿透
  /deep/ .van-nav-bar__title {
    max-width: unset;
    margin: 0;
    width: 100%;
  }
}
</style>
